<!--
- Kit: Shadcn UI
- Component: Field
- Code:
```twig
<div class="w-full max-w-md">
    <twig:Field orientation="horizontal">
        <twig:Field:Content>
            <twig:Field:Label for="2fa">Multi-factor authentication</twig:Field:Label>
            <twig:Field:Description>
                Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
            </twig:Field:Description>
        </twig:Field:Content>
        <twig:Switch id="2fa" />
    </twig:Field>
</div>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div class="w-full max-w-md">
    <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
<div data-slot="field-content" class="group/field-content flex flex-1 flex-col gap-1.5 leading-snug ">
<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label" for="2fa">Multi-factor authentication</label>
            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.
            </p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer ">
    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" id="2fa">
    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
</label>

    </div>
</div>